<template>
  <div>
    <button
      class="btn btn-arrow-right mr-4"
      style="width:22%;"
      v-for="(tab,index) in tabs"
      v-bind:key="(tab, index)"
      :class="num===index?'btn-success':'btn-primary'"
      @click="switch_table(index)"
    >{{tab}}</button>
    <div class="panel-body" style="background-color: #eeeeee;">
      <div class="tab-content">
        <div class="tab-pane active" id="tab-1" v-show="num===0">
          <div class="row">
            <info_label
              id="build"
              hyper="true"
              :link="buildinfo_url"
              :type="common.type"
              :title="common.titles[0]"
              :num="labelsData.build"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.success"
            ></info_label>
          </div>
          <div class="row">
            <info_label
              id="build2"
              hyper="true"
              :link="buildinfo_url"
              :type="common.type"
              :title="common.titles[1]"
              :num="labelsData['daily_build']"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.primary"
            ></info_label>
            <info_label
              id="build3"
              hyper="true"
              :link="buildinfo_url"
              :type="common.type"
              :title="common.titles[2]"
              :num="labelsData['submit_build']"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.primary"
            ></info_label>
            <info_label
              id="build4"
              hyper="true"
              :link="buildinfo_url"
              :type="common.type"
              :title="common.titles[3]"
              :num="labelsData['verify_build']"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.primary"
            ></info_label>
            <info_label
              id="build8"
              hyper="true"
              :link="buildinfo_url"
              :type="common.type"
              :title="common.titles[18]"
              :num="labelsData['release_build']"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.primary"
            ></info_label>
          </div>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane active" id="tab-1" v-show="num===1">
          <div>
            <codecheck_label_group
              hyper="true"
              :link="codecheck_url"
              v-if="common!=null"
              id="codecheck"
              :common="common"
              :labelsData="labelsData"
            ></codecheck_label_group>
          </div>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane active" id="tab-1" v-show="num===2">
          <div class="row">
            <info_label
              id="autotest1"
              hyper="true"
              :link="autotest_url"
              :type="common.type"
              :title="common.titles[19]"
              :num="labelsData['autotest']"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.success"
            ></info_label>
          </div>
          <div>
            <autotest_result
              row2="row"
              ref="autotest_pie"
              :pass="labelsData.av_pass_rate"
              :exc="labelsData.av_exc_rate"
              :cover="labelsData.av_cover"
            ></autotest_result>
          </div>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane active" id="tab-1" v-show="num===3">
          <div class="row">
            <info_label
              id="release1"
              :type="common.titles[1]"
              :title="common.titles[14]"
              :num="labelsData.daily_version_release"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.success"
            ></info_label>
            <info_label
              id="release2"
              :type="common.titles[18]"
              :title="common.titles[14]"
              :num="labelsData.release_version_release"
              :sub="common.subs[0]"
              :to_sub="common.to_sub"
              :cls="common.success"
            ></info_label>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <lineChart
          id="chartmark"
          :chartData="labelsData.chart_data"
          title="持续集成评分趋势"
          :labelsSet="labelsMark"
          :y_keys="y_keysMark"
          x_keys="true"
        ></lineChart>
      </div>
    </div>
  </div>
</template>
<script>
import codecheck_label_group from '@/components/devops/label_group.vue';
import info_label from '@/components/devops/info_label.vue';
import lineChart from '@/components/devops/lineChart.vue';
import autotest_result from '@/components/devops/autotest_result.vue';
export default {
	name: 'steps',
	props: {
		common: Object,
		labelsData: Object
	},
	data() {
		return {
			cols: ['project', 'jobName', 'buildNumber', 'updateTime'],
			tabs: ['构建', '代码检查', '自动化测试', '发布'],
			num: 0,
			table_data: [],
			show_keys: ['project', 'jobName', 'buildNumber', 'updateTime'],
			labelsArr1: [
				'平均时长',
				'daily-build平均时长',
				'submit平均时长',
				'verify平均时长',
				'release平均时长'
			],
			labelsMark: [
				'构建评分',
				'静态检查评分',
				'质量检查评分',
				'规范检查评分',
				'自动化测试评分'
			],
			y_keysMark: [
				'av_mark',
				'static_av_mark',
				'quality_av_mark',
				'style_av_mark',
				'autotest_av_mark'
			],
			buildinfo_url:
				'/#/project/' + this.$route.params.pmsProjectId + '/devops/buildinfo',
			codecheck_url:
				'/#/project/' + this.$route.params.pmsProjectId + '/devops/codecheck',
			autotest_url:
				'/#/project/' + this.$route.params.pmsProjectId + '/devops/autotest'
		};
	},
	components: {
		codecheck_label_group,
		info_label,
		lineChart,
		autotest_result
	},
	methods: {
		switch_table: function(index) {
			console.log(this.labelsData);
			this.num = index;
			setTimeout(this.$refs.autotest_pie.draw, 100);
		}
	}
};
</script>
<style scoped>
</style>